import { defineStore } from "pinia";
import type {
  ContentOption,
  HeaderOption,
  SidebarOption,
  SystemOption,
  TabsOption,
  ThemeState,
} from "./typing";
import { cloneDeep } from "lodash";
import { message } from "ant-design-vue";
import i18n from "@/locale";
import { THEME_CONFIG } from "@/utils/storage/key";
import type { Language } from "@/locale/typing";
/**系统栏默认配置 */
export const systemDefaultConfig = (): SystemOption => {
  return {
    themeColor: "#ffa500",
    locale: "zh-CN",
  };
};
/**侧边栏默认配置 */
export const sidebarDefaultConfig = (): SidebarOption => {
  return {
    fixed: true,
    fixedLogo: true,
    collapsed: false,
    width: 260,
    collapsedWidth: 64,
    unSelected: {
      backgroundColor: "#000B16",
      color: "#cccccc",
    },
    selected: {
      backgroundColor: "#eeeeee",
      color: "#000B16",
    },
  };
};
/**顶栏默认配置 */
export const headerDefaultConfig = (): HeaderOption => {
  return {
    showMenuIcon: true,
    fixed: true,
    showBreadcrumb: true,
    style: {
      backgroundColor: "#000B16",
      color: "#cccccc",
      fontSize: 20,
    },
  };
};
/**内容区默认配置 */
export const contentDefaultConfig = (): ContentOption => {
  return {
    style: {
      backgroundColor: "#eeeeee",
      color: "#000000",
    },
    showBottom: true,
    transition: "opacity",
  };
};
/**标签栏默认配置 */
export const tabsDefaultConfig = (): TabsOption => {
  return {
    fixed: true,
    type: "card",
    style: {
      backgroundColor: "#ffffff",
    },
    size: "middle",
    tabBarGutter: 8,
    close: true,
    refresh: true,
  };
};
/**默认配置 */
const defaultConfig = (): ThemeState => {
  return {
    menu: 1,
    showSearch: false,
    key: 0,
    sidebar: sidebarDefaultConfig(),
    header: headerDefaultConfig(),
    content: contentDefaultConfig(),
    tabs: tabsDefaultConfig(),
    system: systemDefaultConfig(),
  };
};
export const useThemeStore = defineStore("theme", {
  state: () => {
    const themeConfigStr = localStorage.getItem(THEME_CONFIG);
    const themeConfig = themeConfigStr
      ? ({ ...JSON.parse(themeConfigStr), key: 0 } as ThemeState)
      : defaultConfig();
    return themeConfig;
  },
  actions: {
    setStorage() {
      const state = cloneDeep(this.$state);
      delete state.key;
      const config = JSON.stringify(state);
      localStorage.setItem(THEME_CONFIG, config);
      message.success(i18n.global.t("保存成功"));
    },
    setLocale(lang: Language) {
      i18n.global.locale.value = lang;
      this.system.locale = lang;
    },
  },
});
